<script setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { addReturnReason, updateReturnReason } from '@/service/order-return-reason.js'

const props = defineProps({
  type: {
    type: String,
    default: 'add',
  },
})

const reasonForm = reactive({
  id: null,
  name: null,
  sort: 1,
  status: 1,
})
const reasonFormRef = ref()
const showModal = ref(false)
watch(showModal, (value) => {
  if (!value) {
    Object.assign(reasonForm, {
      id: null,
      name: null,
      sort: 1,
      status: 1,
    })
    reasonFormRef.value.resetFields()
  }
})
const emit = defineEmits(['update'])
const formRules = reactive({
  name: [
    { required: true, message: '退货原因不能为空', trigger: 'blur' },
    { min: 2, max: 15, message: '退货原因长度在 2 到 15 个字符', trigger: 'blur' },
  ],
})
async function onTapAddButton() {
  try {
    await reasonFormRef.value.validate()
  } catch {
    ElMessage.warning('请检查表单是否已填写完整！')
    return
  }
  const params = {}
  params.name = reasonForm.name
  params.sort = reasonForm.sort
  params.status = reasonForm.status
  await addReturnReason(params)
  ElMessage.success('添加成功！')
  emit('update')
  showModal.value = false
}
async function onTapUpdateButton() {
  try {
    await reasonFormRef.value.validate()
  } catch {
    ElMessage.warning('请检查表单是否已填写完整！')
    return
  }
  const params = {}
  params.id = reasonForm.id
  params.name = reasonForm.name
  params.sort = reasonForm.sort
  params.status = reasonForm.status
  await updateReturnReason(params)
  ElMessage.success('更新成功！')
  emit('update')
  showModal.value = false
}
defineExpose({
  showModal,
  reasonForm,
})
</script>

<template>
  <el-dialog
    v-model="showModal"
    :close-on-click-modal="true"
    :title="type === 'add' ? '添加退货原因' : '修改退货原因'"
    draggable
    style="width: 400px"
  >
    <el-form ref="reasonFormRef" :model="reasonForm" :rules="formRules" label-position="right" label-width="120px">
      <el-form-item label="退货原因:" prop="name">
        <el-input v-model="reasonForm.name" placeholder="请输入退货原因" style="width: 230px" />
      </el-form-item>
      <el-form-item>
        <template #label>
          <el-tooltip :hide-after="100" content="退货原因的顺序越高越靠前" effect="light" placement="bottom-start">
            <span>排序:</span>
          </el-tooltip>
        </template>

        <el-input-number
          v-model="reasonForm.sort"
          :controls="false"
          :precision="0"
          align="left"
          :max="9999"
          :min="1"
          placeholder="请输入退货原因排序"
          style="width: 230px"
          value-on-clear="min"
        />
      </el-form-item>
      <el-form-item label="是否启用:">
        <el-switch v-model="reasonForm.status" :activeValue="1" :inactive-value="0" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="showModal = false">取消</el-button>
      <el-button v-if="type === 'add'" type="primary" @click="onTapAddButton">新增</el-button>
      <el-button v-else type="primary" @click="onTapUpdateButton">修改</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
